<template>
  <div
    class="confirm"
    v-if="isShow"
  >
    <div class="con_box">
      <div class="title">{{text.type}}</div>

      <div class="content">{{text.msg}}</div>
      <div class="h20"></div>

      <div class="tools">
        <span
          @click="ok()"
          v-if="text.btn.ok"
          class="tools-item sure"
        >{{text.btn.ok}}</span>

        <span
          @click="close()"
          v-if="text.btn.no"
          class="tools-item cancle"
        >{{text.btn.no}}</span>
      </div>
      <div class="h30"></div>
    </div>
  </div>
</template>
<script>
export default {
    name:'zhxconfirm',
  data() {
    return {
      isShow: true,
      text: {
        type: '提示',
        msg: '确定删除此条信息？',
        btn: {
          ok: '确定',
          no: '取消'
        },
      }
    }
  },
  methods: {
    close() {
      // console.log('关闭');
    },
    ok() {
      // console.log('确定')
    }
  }
}
</script>
<style scoped lang='scss'>
.confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba($color: #000000, $alpha: 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.1rem;
  .con_box {
    width: 4rem;
    background-color: #fff;
    border-radius: 0.1rem;

    .title {
      padding: 0 0.2rem;
      line-height: 0.5rem;
      background: #5690fc;
      border-top-left-radius: 0.1rem;
      border-top-right-radius: 0.1rem;
      font-size: 0.22rem;
      color: #fff;
    }
    .content {
    padding: 0.2rem;
    font-size: 0.22rem;
    line-height: .3rem;
    }
    .tools {
      height: 0.6rem;
      display: flex;
      justify-content: center;
    }
    .tools-item {
      height: 0.4rem;
      line-height: 0.4rem;
      padding: 0 0.2rem;
      font-size: 0.18rem;
      border-radius: 0.06rem;
      color: #ccc;
      margin-left: 0.2rem;
      box-sizing: border-box;
      cursor: pointer;
    }
    .tools-item.sure {
      background: #5690fc;
      color: #fff;
      margin-left: 0;
      margin-right: 0.05rem;
    }
    .tools-item.cancle {
      border: 0.01rem solid #ccc;
    }
  }
}
</style>
